<template>  
  <view class="container">  
    <!-- 年度统计模块 -->  
    <view class="annual-container">  
      <view class="header">  
        <select v-model="selectedYear" @change="updateYear">  
          <option v-for="year in years" :key="year" :value="year">{{ year }}</option>  
        </select>  
        <text class="title">年度统计</text>  
      </view>  
      <view class="stats">  
        <view class="stat-item">  
          <text class="label">次数</text>  
          <text class="value">{{ animatedAnnualStats.count.toFixed(0) }}</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">得分</text>  
          <text class="value">{{ animatedAnnualStats.score.toFixed(0) }}</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">里程</text>  
          <text class="value">{{ animatedAnnualStats.distance.toFixed(1) }} km</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">排名</text>  
          <text class="value">{{ animatedAnnualStats.rank }}</text>  
        </view>  
      </view>  
    </view>  

    <!-- 月度统计模块 -->  
    <view class="monthly-container">  
      <view class="monthly-header">  
        <select v-model="selectedMonth" @change="updateMonth">  
          <option v-for="month in months" :key="month" :value="month">{{ month }}</option>  
        </select>  
        <text class="title">月度统计</text>  
      </view>  
      <view class="monthly-stats">  
        <view class="stat-item">  
          <text class="label">次数</text>  
          <text class="value">{{ animatedMonthlyStats.count.toFixed(0) }}</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">得分</text>  
          <text class="value">{{ animatedMonthlyStats.score.toFixed(0) }}</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">里程</text>  
          <text class="value">{{ animatedMonthlyStats.distance.toFixed(1) }} km</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">排名</text>  
          <text class="value">{{ animatedMonthlyStats.rank }}</text>  
        </view>  
      </view>  
    </view>  

    <!-- 日统计模块 -->  
    <view class="daily-container">  
      <view class="daily-header">  
        <select v-model="selectedDate" @change="updateDate">  
          <option v-for="date in days" :key="date" :value="date">{{ date }}</option>  
        </select>  
        <text class="title">日统计</text>  
      </view>  
      <view class="daily-stats">  
        <view class="stat-item">  
          <text class="label">次数</text>  
          <text class="value">{{ animatedDailyStats.count.toFixed(0) }}</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">得分</text>  
          <text class="value">{{ animatedDailyStats.score.toFixed(0) }}</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">里程</text>  
          <text class="value">{{ animatedDailyStats.distance.toFixed(1) }} km</text>  
        </view>  
        <view class="stat-item">  
          <text class="label">排名</text>  
          <text class="value">{{ animatedDailyStats.rank }}</text>  
        </view>  
      </view>  
    </view>  

    <view class="card">  
      <view class="card-distance">  
        <text class="record-title">最远距离</text>  
        <text class="record-value">{{ records.farthestDistance }} km</text>  
      </view>  
      <view class="card-stats">  
        <view class="card-speed">  
          <text class="record-title">最大速度</text>  
          <text class="record-value">{{ records.maxSpeed }} km/h</text>  
        </view>  
        
        <view class="card-time">  
          <text class="record-title">最长时间</text>  
          <text class="record-value">{{ records.longestTime }}</text>  
        </view>   
      </view>  
      <view class="card-stats">  
        <view class="card-mileage-accrual">  
          <text class="record-title">累计里程</text>  
          <text class="record-value">{{ records.totalDistance }} km</text>  
        </view>   
        <view class="card-cumulative-duration">  
          <text class="record-title">累计时长</text>  
          <text class="record-value">{{ records.totalDuration }}</text>  
        </view>   
      </view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      selectedYear: 2024,  
      selectedMonth: 8,  
      selectedDate: 12,  
      years: Array.from({ length: 10 }, (_, i) => 2020 + i),  
      months: Array.from({ length: 12 }, (_, i) => i + 1),  
      days: Array.from({ length: 31 }, (_, i) => i + 1),  
      annualStats: {  
        count: 20,  
        score: 1500,  
        distance: 250.5,  
        rank: 5  
      },  
      monthlyStats: {  
        count: 5,  
        score: 300,  
        distance: 45.5,  
        rank: 10  
      },  
      dailyStats: {  
        count: 1,  
        score: 60,  
        distance: 10.0,  
        rank: 20  
      },  
      records: {  
        farthestDistance: 15.0,  
        maxSpeed: 25.0,  
        longestTime: "02:30:00",  
        totalDistance: 120.0,  
        totalDuration: "10:00:00"  
      },  
      animatedAnnualStats: { count: 0, score: 0, distance: 0, rank: '---' },  
      animatedMonthlyStats: { count: 0, score: 0, distance: 0, rank: '---' },  
      animatedDailyStats: { count: 0, score: 0, distance: 0, rank: '---' },  
    };  
  },  
  mounted() {  
    this.animateToStats(this.annualStats, 'animatedAnnualStats');  
    this.animateToStats(this.monthlyStats, 'animatedMonthlyStats');  
    this.animateToStats(this.dailyStats, 'animatedDailyStats');  
  },  
  methods: {  
    updateYear() {  
      // 更新年功能实现  
    },  
    updateMonth() {  
      // 更新月功能实现  
    },  
    updateDate() {  
      // 更新日功能实现  
    },  
    animateToStats(targetStats, animatedKey) {  
      const duration = 2000; // 动画持续时间  
      const frameRate = 60; // 帧率  
      const totalFrames = Math.floor((duration / 1000) * frameRate);  
      
      const increments = {  
        count: targetStats.count / totalFrames,  
        score: targetStats.score / totalFrames,  
        distance: targetStats.distance / totalFrames,  
      };  

      // 逐帧动画的逻辑  
      let currentFrame = 0;  
      
      const interval = setInterval(() => {  
        if (currentFrame < totalFrames) {  
          this[animatedKey].count += increments.count;  
          this[animatedKey].score += increments.score;  
          this[animatedKey].distance += increments.distance;  
          this[animatedKey].rank = targetStats.rank; // 设置排名  
          currentFrame++;  
        } else {  
          clearInterval(interval);  
          this[animatedKey].count = targetStats.count; // 确保最终值  
          this[animatedKey].score = targetStats.score;  
          this[animatedKey].distance = targetStats.distance;  
        }  
      }, 1000 / frameRate);  
    }  
  }  
};  
</script>  

<style>  
.container {   
  height: 100vh;  
  padding: 20px;  
  background: linear-gradient(to bottom, #d4dfff, #f0f4ff);   
  border-radius: 15px;   
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);   
  overflow: auto;   
}  

select {  
  padding: 5px;  
  border-radius: 5px;  
  border: 1px solid #ccc;  
  margin-right: 10px;   
  background-color: #ffefdc;  
}  

.annual-container, .monthly-container, .daily-container {  
  margin-bottom: 20px;  
  padding: 20px;  
  border-radius: 15px;  
  background-color: #E0FFFF;   
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* 模块阴影效果 */  
}  

.header, .monthly-header, .daily-header {  
  display: flex;  
  align-items: center;  
  margin-bottom: 20px;  
  flex-wrap: wrap; /* 允许换行 */  
}   

.title {  
  font-size: 24px;  
  color: #000000;   
}  

.stats, .monthly-stats, .daily-stats {  
  display: flex;  
  justify-content: space-between; /* 均匀分布 */  
}  

.stat-item {  
  text-align: center;   
}  

.label {  
  display: block;  
  font-size: 16px;  
  color: #000000;   
}  

.value {  
  font-size: 24px;  
  font-weight: bold;  
  color: #000000;  
  transition: all 0.2s ease-in-out; /* 平滑过渡动效 */  
}  

.monthly-header, .daily-header {  
  margin-bottom: 15px;   
}  

.card {  
  margin-top: 20px; /* 为卡片添加顶部间距 */  
}  

.card-stats {  
  display: flex; /* 使用 Flexbox */  
  justify-content: space-between; /* 水平排列并均匀分布 */  
}  

.record-title {  
  color: #ffffff;  
}  

.record-value {  
  color: #ffffff;  
}  

.card-distance {  
  background-color: #00aaff;  
  border-radius: 10px;  
  padding: 15px;  
  width: 90%;  
  height: 40px;  
  margin-bottom: 15px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);   
  display: flex;   
  flex-direction: column; /* 垂直排列 */  
  justify-content: center; /* 垂直居中 */  
  align-items: center; /* 水平居中 */  
}  

.card-speed {  
  background-color: #ffaa00;  
  border-radius: 10px;  
  padding: 15px;  
  width: 40%;  
  height: 40px;  
  margin-bottom: 15px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);   
  display: flex;  
  flex-direction: column;  
  justify-content: center;   
  align-items: center;   
}  

.card-time {  
  background-color: #7100a9;  
  border-radius: 10px;  
  padding: 15px;  
  width: 40%;  
  height: 40px;  
  margin-bottom: 15px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);   
  display: flex;  
  flex-direction: column; /* 垂直排列 */  
  justify-content: center; /* 垂直居中 */  
  align-items: center; /* 水平居中 */  
}  

.card-mileage-accrual {  
  background-color:  #ffaa00;  
  border-radius: 10px;  
  padding: 15px;  
  width: 40%;  
  height: 40px;  
  margin-bottom: 15px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);   
  display: flex;  
  flex-direction: column; /* 垂直排列 */  
  justify-content: center; /* 垂直居中 */  
  align-items: center; /* 水平居中 */  
}  

.card-cumulative-duration {  
  background-color: #7100a9;  
  border-radius: 10px;  
  padding: 15px;  
  width: 40%;  
  height: 40px;  
  margin-bottom: 15px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);   
  display: flex;  
  flex-direction: column; /* 垂直排列 */  
  justify-content: center; /* 垂直居中 */  
  align-items: center; /* 水平居中 */  
}  
</style>